<template>
  <div class="fillcontain">
    <el-form :inline="true" size="small">
      <el-form-item label="歌手名称">
        <el-input v-model="searchForm.name" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button size="mini" type="primary" @click="toSearch">查询</el-button>
          <el-button size="mini" type="success" @click="addSingerFlag=true">添加</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      highlight-current-row
      header-cell-class-name="table-header-class"
      style="width:100%"
      v-loading="loading"
    >
      <el-table-column prop="pictureUrl" label="头像" align="center">
        <template slot-scope="scope">
    　　　　<img :src="scope.row.pictureUrl" width="48" height="32" class="head_pic"/>
    　　</template>
      </el-table-column>
      <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column prop="birthday" label="生日" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button-group>
            <el-button size="mini" type="info" @click="toDetail(scope.row.id)">详情</el-button>
            <el-button size="mini" type="success" @click="toEdit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="toDelete(scope.row.id)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper, sizes"
        :page-size="page.pageSize"
        :page-sizes="[2,5,10,20,50,100]"
        :total="page.total"
        @current-change="pageChange"
        @size-change="sizeChange"
      ></el-pagination>
    </el-row>

    <!-- 添加歌手 -->
    <el-dialog title="添加歌手" :append-to-body="true" :visible.sync="addSingerFlag" width="500px">
      <add-singer :addSingerFlag="addSingerFlag" @changeAddSingerFlag="changeAddSingerFlag"></add-singer>
    </el-dialog>

    <!-- 编辑歌手 -->
    <el-dialog title="编辑歌手" :append-to-body="true" :visible.sync="editSingerFlag" width="500px">
      <edit-singer
        :editSingerFlag="editSingerFlag"
        :editId="editId"
        @changeEditSingerFlag="changeEditSingerFlag"
      ></edit-singer>
    </el-dialog>
  </div>
</template>

<script>
import * as singerApi from "@/api/singerApi";
import addSinger from "./addSinger";
import editSinger from "./editSinger";
export default {
  data() {
    return {
      page: {
        page: 1,
        pageSize: 10,
        total: 1
      },
      loading: false,
      addSingerFlag: false,
      editSingerFlag: false,
      editId: Number,
      tableData: [],
      searchForm: {}
    };
  },
  components: {
    addSinger,
    editSinger
  },
  mounted() {
    this.getSingerList();
  },
  methods: {
    getSingerList() {
      return new Promise((resolve, reject) => {
        let requestData = Object.assign({}, this.page, this.searchForm);
        this.loading = true;
        singerApi.getSingerList(requestData).then(res => {
          if (res.errorCode == 0) {
            this.page.total = res.totalCount;
            this.tableData = res.data;
            this.loading = false;
          }
          resolve();
        });
      });
    },
    pageChange(page) {
      this.page.page = page;
      this.getSingerList();
    },
    sizeChange(size) {
      this.page.pageSize = size;
      this.getSingerList();
    },
    changeAddSingerFlag(value) {
      this.addSingerFlag = value;
      this.getSingerList();
    },
    changeEditSingerFlag(value) {
      this.editSingerFlag = value;
      this.getSingerList();
    },
    toSearch() {
      this.page.page = 1;
      this.getSingerList();
    },
    toEdit(id) {
      this.editId = id;
      this.editSingerFlag = true;
    },
    toDetail(id) {
      this.$router.push({ name: "singerDetail", query: { id } });
    },
    toDelete(id) {
      this.$confirm("是否删除该歌手?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          singerApi.deleteSinger({ id }).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getSingerList();
          });
        });
    }
  }
};
</script>

<style lang="less" scope>
.fillcontain {
  height: calc(100vh - 180px);
  padding: 30px;
  overflow: auto;
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
